<?php
	
?>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="styles.css"/>
		<script type='text/javascript' src='jquery-min.js'></script>
		<script type='text/javascript'>
			$(document).ready(function(){
				$( "#txtConfirmPassword" ).keyup(function() {
					var pwd = document.getElementById("txtPassword").value;
					var re_pwd = document.getElementById("txtConfirmPassword").value;
					if(pwd != re_pwd){
						$('#password_match').html("Password not match!");
					}else{
						$('#password_match').html("");
					}
				});
				
				$("#btnSubmit").click(function(){
					var username = document.getElementById("txtUsername").value;
					var pwd = document.getElementById("txtPassword").value;
					var re_pwd = document.getElementById("txtConfirmPassword").value;
					var fname = document.getElementById("txtFName").value;
					var lname = document.getElementById("txtLName").value;
					
					if(username.length <= 0){
						alert("Username cannot be blank");
						return false;
					}
					
					if(pwd != re_pwd){
						alert("Password not match!");
						return false;
					}
					
					$.ajax({
						url:"backend/user.php",
						cache:false,
						type:"POST",
						data:{ACTION:"REG",txtUsername:username,txtPassword:pwd,txtFName:fname,txtLName:lname},
						success:function(responseText){
							alert(responseText);
							var rs = $.parseJSON(responseText);
							if(rs.status == "OK"){
								alert("welcome you to become a member!");
								document.getElementById("txtUsername").value = "";
								document.getElementById("txtPassword").value = "";
								document.getElementById("txtFName").value = "";
								document.getElementById("txtLName").value = "";
							}
						}
					});
				});
			});
		</script>
	</head>
	<body>
		<div id="container">
		<div id="div_header"></div>
		<div id="div_nav" class="menu">
				<?php include "nav_bar.php" ?>
			</div>
			<div id="div_main">
		<form id="frmReg" method="post" action="backend/user.php">
			<input type="hidden" name="ACTION" value="REG" />
					<div class="formInputBlock">
						<div style="text-align:center;background:#b4b9F3;">
							<div class="formField">
								<div class="formFieldLabel">
								Username
								<b title="Require Field" style="color:#FF0000; cursor:default;" >*</b>
								</div>
								<input type="text" style="border: 1px solid #D3DEE8" id="txtUsername" name="txtUsername" >
							</div>
							
							<div class="formField">
								<div class="formFieldLabel">
								Password
								<b title="Require Field" style="color:#FF0000; cursor:default;" >*</b>
								</div>
								<input type="password" style="border: 1px solid #D3DEE8" id="txtPassword" name="txtPassword" >
							</div>
							<div class="formField">
								<div class="formFieldLabel">
								Confirm password
								<b title="Require Field" style="color:#FF0000; cursor:default;" >*</b>
								</div>
								<input type="password" style="border: 1px solid #D3DEE8" id="txtConfirmPassword" name="txtConfirmPassword" >
								<p id="password_match"></p>
							</div>
							<div class="formField">
								<div class="formFieldLabel">
								First Name
								<b title="Require Field" style="color:#FF0000; cursor:default;" >*</b>
								</div>
								<input type="text" style="border: 1px solid #D3DEE8" size="30" id="txtFName" name="txtFName" >
							</div>
							<div class="formField">
								<div class="formFieldLabel">
								Last Name
								<b title="Require Field" style="color:#FF0000; cursor:default;" >*</b>
								</div>
								<input type="text" style="border: 1px solid #D3DEE8" size="30" id="txtLName" name="txtLName" >
							</div>
							<div class="formField">
								<input type="button" id="btnSubmit" name="btnSubmit" value="Register">
							</div>
						</div>
					</div>
		</form>
		</div>
		<div id="div_footer" >Copyright 2013 @Dao Anh Vu</div>
		</div>
	</body>
</html>
